<template>
  <div class="space-occupying"></div>
  <div class="map">
    <Suspense>
      <T_map ref="tMapRef" v-model:markers="markers" @transmit="transmit" />
    </Suspense>
  </div>
  <div class="box" v-if="machine_list.length">
    <Machine_item
      @click="skip(item)"
      v-for="item in machine_list"
      :key="item.machineId"
      :machine_item="item"
      @open="open"
    />
  </div>
  <div class="null_data" v-else>
    <Null_data />
  </div>
  <!-- 底部弹出选择框 -->
  <van-action-sheet
    v-model:show="show"
    :actions="actions"
    cancel-text="取消"
    close-on-click-action
    @select="select"
  />
  <Tabbar />
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'

import { getMachineListApi } from '@/api/machine/machine'
import { useMachineInfoStore, useMapInfoStore, useUserInfoStore } from '@/stores'
import { useMapMethods } from '@/hooks/map_methods'

const machine_list = ref([])
const markers = ref([])
const tMapRef = ref(null)
const $router = useRouter()
const mapInfoStor = useMapInfoStore()
const userInfoStore = useUserInfoStore()
const machineInfoStore = useMachineInfoStore()
const { navToMap } = useMapMethods()
const actions = [
  { value: 2, name: '高德地图' },
  { value: 3, name: '腾讯地图' },
]
const show = ref(false)
const mapSkipItem = ref({
  machineName: null,
  latitude: null,
  longitude: null,
})

/** 跳转到详情页并且传入id */
const skip = (item) => {
  if (!userInfoStore.userInfo) return
  machineInfoStore.setMachineInfo(item)
  $router.push('/device_details')
}

/**获取到地图组件传过来的经纬度 */
const transmit = async (ev) => {
  const mapInfo = { longitude: ev.lng, latitude: ev.lat }
  mapInfoStor.setMapInfo(mapInfo) // 修改全局的经纬度
  const res = await getMachineListApi(mapInfo) // 调用接口
  machine_list.value = res.data
}

watch(
  () => machine_list.value,
  (newVal) => {
    if (!newVal.length) return
    markers.value = newVal.map((item) => {
      return {
        lng: Number(item.longitude),
        lat: Number(item.latitude),
        machineName: item.machineName,
      }
    })
  },
  {
    immediate: true,
  },
)

/**获取点击设备——子组件传过来的设备经纬度值 */
const open = (item) => {
  show.value = true
  // console.log(item)
  mapSkipItem.value.machineName = item.machineName
  mapSkipItem.value.latitude = item.latitude
  mapSkipItem.value.longitude = item.longitude
}
/**调起手机的地图app */
const select = (item) => {
  // 传值进行地图跳转
  navToMap(
    mapSkipItem.value.latitude,
    mapSkipItem.value.longitude,
    mapSkipItem.value.machineName,
    item.value,
  )
}

onMounted(() => {
  tMapRef.value.mapInit()
})
</script>

<style lang="scss" scoped>
.space-occupying {
  width: 100%;
  height: 210px;
}
.map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 221px;
  z-index: 9;
  padding: 10px 0 0;
  background: #f5f5f5;
}
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 100px;
  background-color: var(--defaultBgc);
  width: 100%;
  min-height: calc(100% - 321px);
}
.null_data {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
